<template>
    <div class="flex justify-center items-center w-screen h-screen bg-gray-300">
        <div class="box">
            <div class="up">
                <LayoutTheHeader />
            </div>
            <div class="center">
                <LayoutTheNavs class="Nav" />
                <slot />
            </div>
            <div class="down">
                <LayoutTheBottom />
            </div>
        </div>
    </div>
</template>

<style scoped>
.box {
    @apply w-4/5 h-screen flex flex-col
}

.box .up {
    @apply flex h-[6%]
}

.box .center {
    @apply flex h-[86%]
}

.box .down {
    @apply flex h-[8%]
}
</style>